<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>note-code</title>
	<style media="scrren,print">
		/* 竖屏下生效（height>width）*/
		@media (orientation:portrait) {
			.container {
				height: 500px;
				background-color: salmon;
				font-size: 22px;
			}
		}

		/* 横屏下生效（width>height） */
		@media (orientation: landscape) {
			.container {
				height: 200px;
				background-color: gold;
				font-size: 28px;
			}
		}
	</style>
</head>

<body>
	<div class="container">
		横屏竖屏的显示是不同的，切换手机模式，方便横竖屏切换，也可以拖动
	</div>
</body>

</html>